<template>
  <div class="ad-placeholder">
    <el-link :underline="false" class="placeholder-link" @click="$emit('click')">
      <span class="placeholder-text">投放广告</span>
    </el-link>
  </div>
</template>

<script>
import {
  defineComponent
} from 'vue';

export default defineComponent({
  name: 'AdPlaceholder',
  emits: ['click']
});
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.ad-placeholder {
  @include flex-center;
  height: 100%;
  width: 100%;
  border: 2px dashed #dcdfe6;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.ad-placeholder:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.placeholder-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: #909399;
  padding: 20px;
}

.placeholder-link:hover {
  color: #409eff;
}

.placeholder-text {
  font-size: 1.7rem;
  font-weight: 700;
  color: #666;
}
</style>
